<html>
<head>
<script src="/js-test-resources/js-test.js"></script>
<script src="http://127.0.0.1:8000/resources/slow-script.pl?delay=100"></script>
<script src="resources/picture-preload-helper.js"></script>
</head>
<body>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();
    shouldBeTrue("internals.isPreloaded('resources/preload-test.jpg?0');");
    shouldBeTrue("internals.isPreloaded('resources/image2.png');");
    loadFromImg(1);
    loadFromImg(2);
    loadFromImg(3);
    loadFromImg(4);
    loadFromImg(5);
    loadFromImg(6);
    loadFromImg(7);
</script>
<!-- Control group -->
<img src="resources/preload-test.jpg?0">
<picture>
<source srcset="resources/image2.png">
<img></picture>
<!-- Invalid nesting tests -->
<!-- In the following tests, nesting messes up the selection algorithm -->
<picture>
    <picture>
        <source sizes="400px" srcset="resources/base-image1.png?1 200w, resources/base-image3.png?1 400w, resources/base-image2.png?1 800w">
        <div>
            </picture>
        </div>
        <img src="resources/preload-test.jpg?1">
    </picture>
</picture>
<picture>
    <div>
        </picture>
        </picture>
        </picture>
    </div>
    <source sizes="400px" srcset="resources/base-image1.png?2 200w, resources/base-image3.png?2 400w, resources/base-image2.png?2 800w">
    <img src="resources/preload-test.jpg?2">
</picture>
<!-- Here we preload the wrong resource, as we encounter a script element -->
<picture>
    <script>document.write("bla");</script>
    <source sizes="400px" srcset="resources/base-image1.png?3 200w, resources/base-image3.png?3 400w, resources/base-image2.png?3 800w">
    <img src="resources/preload-test.jpg?3">
</picture>
<!-- In the following tests, nesting messes up the selection algorithm, but we don't get it -->
<picture>
    <div>
        <picture>
            <div>
                <source sizes="400px" srcset="resources/base-image1.png?4 200w, resources/base-image3.png?4 400w, resources/base-image2.png?4 800w">
            </div>
            <img src="resources/preload-test.jpg?4">
        </picture>
    </div>
</picture>
<picture>
    <div>
        <picture>
            <div>
                <source sizes="400px" srcset="resources/base-image1.png?5 200w, resources/base-image3.png?5 400w, resources/base-image2.png?5 800w">
                <img src="resources/preload-test.jpg?5">
            </div>
        </picture>
    </div>
</picture>
<!-- We don't keep a checkpoint of the picture stack, so document.write inside picture 
     *that modifies the DOM* will result in a false prediction -->
<!-- In the following tests, we preload the wrong resource, because document.write is modifying the DOM -->
<script>document.write('<picture>');</script>
    <source sizes="400px" srcset="resources/base-image1.png?6 200w, resources/base-image3.png?6 400w, resources/base-image2.png?6 800w">
    <img src="resources/preload-test.jpg?6">
</picture>
<picture>
    <script>document.write('<source sizes="400px" srcset="resources/base-image1.png?7 200w, resources/base-image3.png?7 400w, resources/base-image2.png?7 800w">');</script>
    <img src="resources/preload-test.jpg?7">
</picture>
<!-- This one below makes sure that the preloadScanner doesn't crash -->
<picture>
<source media="(max-width: 2000px)" sizes="2000px" srcset="../../hidpi/resources/image-set-1x.png?1 400w"> <script src="../../forms/resources/picker-common.js">
